<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>护理人员排班 - 照护计划算法</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <style>
        .schedule-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 10px;
            margin-top: 20px;
        }
        
        .time-slot {
            padding: 10px;
            border-radius: 4px;
            text-align: center;
        }
        
        .available {
            background-color: #e8f5e9;
            border: 1px solid #c8e6c9;
        }
        
        .unavailable {
            background-color: #ffebee;
            border: 1px solid #ffcdd2;
        }
        
        .back-link {
            display: inline-block;
            margin: 20px 0;
            color: #1e88e5;
            text-decoration: none;
        }
        
        .back-link:hover {
            text-decoration: underline;
        }
        
        .error-message {
            color: #d32f2f;
            background-color: #ffebee;
            padding: 10px;
            border-radius: 4px;
            margin: 20px 0;
        }
        
        .debug-info {
            margin-top: 20px;
            padding: 10px;
            background-color: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: monospace;
            white-space: pre-wrap;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>护理人员照护计划</h1>
            <p id="caregiver-info">正在加载护理人员信息...</p>
        </header>

        <main style="display: block; padding: 20px;">
            <a href="/dashboard" class="back-link">← 返回控制台</a>
            
            <div class="card">
                <h2>排班情况</h2>
                <p>日期: <span id="schedule-date"></span></p>
                <div class="schedule-grid" id="schedule-container">
                    <p>正在加载排班数据...</p>
                </div>
                <div id="debug-info" class="debug-info"></div>
                <button id="toggle-debug" style="margin-top: 10px; display: none;" onclick="toggleDebug()">显示/隐藏调试信息</button>
            </div>
        </main>

        <footer>
            <p>照护计划算法 &copy; 2025</p>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 从URL获取参数
            const urlParams = new URLSearchParams(window.location.search);
            const caregiverId = urlParams.get('caregiver_id'); // 从查询参数获取ID
            const date = urlParams.get('date');
            
            if (!caregiverId) {
                document.getElementById('caregiver-info').textContent = '错误: 未指定护理人员ID';
                document.getElementById('schedule-container').innerHTML = '<div class="error-message">请在URL中提供caregiver_id参数</div>';
                return;
            }
            
            // 更新页面信息
            document.getElementById('schedule-date').textContent = date || '未指定日期';
            
            // 加载护理人员信息
            fetch(`/caregivers`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP错误 ${response.status}`);
                    }
                    return response.json();
                })
                .then(caregivers => {
                    const caregiver = caregivers.find(c => c.id === caregiverId);
                    if (caregiver) {
                        document.getElementById('caregiver-info').textContent = 
                            `${caregiver.attendant_name} (ID: ${caregiver.id})`;
                    } else {
                        document.getElementById('caregiver-info').textContent = 
                            `护理人员 ID: ${caregiverId}`;
                    }
                })
                .catch(error => {
                    console.error('获取护理人员信息失败:', error);
                    document.getElementById('caregiver-info').textContent = 
                        `护理人员 ID: ${caregiverId} (获取详情失败)`;
                });
            
            // 加载排班数据
            let url = `/caregiver_schedule/${caregiverId}`;
            if (date) {
                url += `?date=${date}`;
            }
            
            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP错误 ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    // 显示调试信息
                    const debugInfo = document.getElementById('debug-info');
                    debugInfo.textContent = JSON.stringify(data, null, 2);
                    document.getElementById('toggle-debug').style.display = 'block';
                    
                    const container = document.getElementById('schedule-container');
                    container.innerHTML = '';
                    
                    if (!data || data.length === 0) {
                        container.innerHTML = '<div class="error-message">没有找到排班数据</div>';
                        return;
                    }
                    
                    // 按时间段排序
                    data.sort((a, b) => a.time_slot - b.time_slot);
                    
                    // 创建时间段元素
                    data.forEach(slot => {
                        const timeSlotElement = document.createElement('div');
                        timeSlotElement.className = `time-slot ${slot.is_available ? 'available' : 'unavailable'}`;
                        
                        const timeText = formatTimeSlot(slot.time_slot);
                        const statusText = slot.is_available ? '可用' : '不可用';
                        
                        timeSlotElement.innerHTML = `
                            <div>${timeText}</div>
                            <div>${statusText}</div>
                        `;
                        
                        container.appendChild(timeSlotElement);
                    });
                })
                .catch(error => {
                    console.error('获取排班数据失败:', error);
                    document.getElementById('schedule-container').innerHTML = 
                        `<div class="error-message">加载排班数据失败: ${error.message}</div>`;
                });
        });
        
        // 格式化时间段
        function formatTimeSlot(slot) {
            const hour = Math.floor(slot / 2);
            const minute = (slot % 2) * 30;
            const startHour = hour.toString().padStart(2, '0');
            const startMinute = minute.toString().padStart(2, '0');
            
            const endHour = (minute === 30 ? (hour + 1) : hour).toString().padStart(2, '0');
            const endMinute = (minute === 30 ? '00' : '30');
            
            return `${startHour}:${startMinute}-${endHour}:${endMinute}`;
        }
        
        // 切换显示调试信息
        function toggleDebug() {
            const debugInfo = document.getElementById('debug-info');
            debugInfo.style.display = debugInfo.style.display === 'none' ? 'block' : 'none';
        }
    </script>
</body>
</html> 